<template>
  <tabs
    :current="current"
    height="80"
    bar-width="60"
    :auth="true"
    activeColor="#F36161"
    inactiveColor="#666"
    :is-scroll="false"
    @change="(e) => (current = e)"
  >
    <tab v-for="(item, i) in tabList" :key="i" :name="item.name" />
    <view class="List px-[30rpx]">
      <list :type="current" />
    </view>

    <view class="footer-box">
      <button class="footer-btn" @click.stop="toReceiveCoupon">
        获取更多好券 >
      </button>
    </view>
  </tabs>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import list from "./components/list.vue";

const tabList = ref<any>([
  {
    name: "未使用",
    status: 0,
  },
  {
    name: "已使用",
    status: 1,
  },
  {
    name: "已过期",
    status: 2,
  },
]);
const current = ref(0);

const toReceiveCoupon = () => {
  uni.navigateTo({
    url: "/pages/index/xinren/index",
  });
};
</script>
<style lang="scss" scoped>
.List {
  position: relative;
  height: calc(100vh - 44px - env(safe-area-inset-bottom));
  padding-bottom: 100rpx;
}

.footer-box {
  position: absolute;
  z-index: 999;
  bottom: env(safe-area-inset-bottom);
  left: 0;
  right: 0;
  background: #fff;
  padding: 10rpx 20rpx;
  .footer-btn {
    @apply bg-primary text-lg text-white leading-[82rpx] h-[82rpx] rounded-full;
  }
}
</style>
